<template>
  <div class="min-h-screen min-w-screen overflow-hidden">

    <el-dialog
        v-model="isFlag.dialogVisibleAcc"
        title="修改资料"
        width="500"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
      <el-form :model="showUser" class="flex flex-col items-center  ">
        <el-form-item label="">
          <el-upload
              accept=".png,.jpg"
              :show-file-list="false"
              action="http://localhost:8080/files/upload"
              :on-success=setusericon
          >
            <img v-if="showUser.usericon" :src="showUser.usericon" class="rounded-full !w-[100px] !h-[100px] object-cover" />
            <el-icon v-else class="avatar-uploader-icon !w-[60px] !h-[60px]"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="showUser.username" disabled autocomplete="off" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="showUser.nickname" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer items-center">
          <el-button @click="isFlag.dialogVisibleAcc = false">取消</el-button>
          <el-button type="primary" @click="saveuser">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
        v-model="isFlag.dialogVisibleGroup"
        title="创建群聊"
        width="500"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
      <el-form :model="newGroup" class="flex flex-col items-center  ">
        <el-form-item label="">
          <el-upload
              accept=".png,.jpg"
              :show-file-list="false"
              action="http://localhost:8080/files/upload"
              :on-success=setgroupicon
          >
            <img v-if="newGroup.groupicon" :src="newGroup.groupicon" class="rounded-full !w-[100px] !h-[100px]" />
            <el-icon v-else class="avatar-uploader-icon !w-[60px] !h-[60px]"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="群名称">
          <el-input v-model="newGroup.groupname" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer items-center">
          <el-button @click="isFlag.dialogVisibleGroup = false">取消</el-button>
          <el-button type="primary" @click="createGroup">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
        v-model="isFlag.dialogVisibleGroupEdit"
        title="修改群资料"
        width="500"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
      <el-form :model="showGroup" class="flex flex-col items-center  ">
        <el-form-item label="">
          <el-upload
              accept=".png,.jpg"
              :show-file-list="false"
              action="http://localhost:8080/files/upload"
              :on-success="editgroupicon"
          >
            <img v-if="showGroup.groupicon" :src="showGroup.groupicon" class="rounded-full object-cover !w-[100px] !h-[100px]" />
            <el-icon v-else class="avatar-uploader-icon !w-[60px] !h-[60px]"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="群名称">
          <el-input v-model="showGroup.groupname" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer items-center">
          <el-button @click="isFlag.dialogVisibleGroupEdit = false">取消</el-button>
          <el-button type="primary" @click="updateGroup">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
        v-model="isFlag.dialogVisibleInviteUser"
        title="通过用户账号邀请进群"
        width="500"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
      <el-form :model="newGroupUser" class="flex flex-col ">
        <el-form-item label="用户账号">
          <el-input v-model="checkGroupUser.username" autocomplete="off" />
        </el-form-item>
        <el-form-item v-if="newGroupUser.userid" label="">
          <div class="flex flex-row rounded bg-gray-200 items-center gap-5 px-5">
            <img :src=checkGroupUser.icon class="w-10 h-10 rounded-full object-cover">
            <div class="flex flex-col  p-0.5 text-gray-500 font-bold">
              <span>账号：{{checkGroupUser.checkusername}}</span>
              <span>昵称：{{checkGroupUser.nickname}}</span>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer items-center">
          <el-button type="success" @click="checkUser">查询</el-button>
          <el-button :disabled="isFlag.invite" type="primary" @click="inviteUsername">邀请</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
        v-model="isFlag.dialogVisibleMessageCreate"
        title="发布通知"
        width="1200"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
      <el-form :model="newMessage" class="flex flex-col ">
        <el-form-item label="标题:">
          <el-input v-model="newMessage.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="正文:">
          <el-input v-model="newMessage.messagetext" type="textarea" autocomplete="off" :rows="5">
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer flex flex-col">
          <div class="flex flex-row justify-between gap-2">
            <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action="http://localhost:8080/messagefiles/upload"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :limit="9"
                :on-exceed="handleExceed"
            >
              <svg class="w-7 h-7 text-gray-400 hover:text-discord-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="M128 384v448h768V384zm-32-64h832a32 32 0 0 1 32 32v512a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V352a32 32 0 0 1 32-32m64-128h704v64H160zm96-128h512v64H256z"></path></svg>
            </el-upload>
            </div>
          <div>
            <el-button type="danger" @click="isFlag.dialogVisibleMessageCreate = false">取消</el-button>
            <el-button  type="success" @click="createMessage">发布</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
    <el-dialog
        v-model="isFlag.dialogVisibleGroupMembersEdit"
        title="成员管理"
        width="800"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
      <el-table :data="editmemberlist">
        <el-table-column width="150" property="users.nickname" label="昵称" />
        <el-table-column width="100" property="users.username" label="账号" />
        <el-table-column
            prop="role,user"
            label="职位"
            width="100"
        >
          <template #default="scope">
            <span v-if="scope.row.role == 2" class="rounded bg-yellow-500 p-1 text-yellow-50">群主</span>
            <span v-if="scope.row.role == 1" class="rounded bg-green-500 p-1 text-green-50">管理员</span>
            <span v-if="scope.row.role == 0" class="rounded bg-blue-400 p-1 text-blue-50">组员</span>
          </template>
        </el-table-column>
        <el-table-column  fixed="right" prop="role" label="Operations" width="120">
          <template #default="scope" >
            <span v-if="scope.row.role == 2"> </span>
            <span v-if="scope.row.role == 1"> </span>
            <el-button v-if="scope.row.role != 1 && showUser.tmpRole == 2 && scope.row.role != 2 "  link type="primary" size="small" @click="setAdmin(scope.row.users.userid)">任命管理员</el-button>
            <el-button v-if="scope.row.role == 1 && scope.row.role != 2 && showUser.tmpRole == 2"  link type="primary" size="small" @click="removeAdmin(scope.row.users.userid)">取消管理员</el-button>
            <el-button v-if="scope.row.role < showUser.tmpRole && scope.row.role != 2" link type="primary" size="small" @click="removeMember(scope.row.users.userid)">踢出成员</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--    顶部栏-->
    <div class="sticky top-0 bg-discord-250 flex w-full border-b-2  border-b-gray-900">
      <div class="w-1/6 min-w-[310px] bg-discord-200 flex items-end">
        <div class="w-1/2 text-gray-50"></div>
        <div class="w-1/2 text-gray-50"></div>
      </div>
      <div class="w-5/6 flex  gap-2 items-center  p-2 justify-between">
        <div class="flex gap-2 items-center m-2 ">
          <svg class="text-discord-logo fill-current w-6 h-6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.91 12.98a5.45 5.45 0 0 1 2.18 6.2c-.1.33-.09.68.1.96l.83 1.32a1 1 0 0 1-.84 1.54h-5.5A5.6 5.6 0 0 1 10 17.5a5.6 5.6 0 0 1 5.68-5.5c1.2 0 2.32.36 3.23.98Z"></path>
            <path d="M19.24 10.86c.32.16.72-.02.74-.38L20 10c0-4.42-4.03-8-9-8s-9 3.58-9 8c0 1.5.47 2.91 1.28 4.11.14.21.12.49-.06.67l-1.51 1.51A1 1 0 0 0 2.4 18h5.1a.5.5 0 0 0 .49-.5c0-4.2 3.5-7.5 7.68-7.5 1.28 0 2.5.3 3.56.86Z"></path>
          </svg>
          <span class="text-base font-bold text-discord-50">{{GroupName}}</span>
        </div>

        <div v-if="showUser.tmpRole > 0" class="flex flex-row gap-2  mr-5">
<!--          发送通知消息-->
          <el-dropdown v-if="showUser.tmpRole == 2">
            <svg class="text-discord-logo fill-current w-8 h-8 p-0.5 hover:bg-discord-hover rounded-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="M600.704 64a32 32 0 0 1 30.464 22.208l35.2 109.376c14.784 7.232 28.928 15.36 42.432 24.512l112.384-24.192a32 32 0 0 1 34.432 15.36L944.32 364.8a32 32 0 0 1-4.032 37.504l-77.12 85.12a357.12 357.12 0 0 1 0 49.024l77.12 85.248a32 32 0 0 1 4.032 37.504l-88.704 153.6a32 32 0 0 1-34.432 15.296L708.8 803.904c-13.44 9.088-27.648 17.28-42.368 24.512l-35.264 109.376A32 32 0 0 1 600.704 960H423.296a32 32 0 0 1-30.464-22.208L357.696 828.48a351.616 351.616 0 0 1-42.56-24.64l-112.32 24.256a32 32 0 0 1-34.432-15.36L79.68 659.2a32 32 0 0 1 4.032-37.504l77.12-85.248a357.12 357.12 0 0 1 0-48.896l-77.12-85.248A32 32 0 0 1 79.68 364.8l88.704-153.6a32 32 0 0 1 34.432-15.296l112.32 24.256c13.568-9.152 27.776-17.408 42.56-24.64l35.2-109.312A32 32 0 0 1 423.232 64H600.64zm-23.424 64H446.72l-36.352 113.088-24.512 11.968a294.113 294.113 0 0 0-34.816 20.096l-22.656 15.36-116.224-25.088-65.28 113.152 79.68 88.192-1.92 27.136a293.12 293.12 0 0 0 0 40.192l1.92 27.136-79.808 88.192 65.344 113.152 116.224-25.024 22.656 15.296a294.113 294.113 0 0 0 34.816 20.096l24.512 11.968L446.72 896h130.688l36.48-113.152 24.448-11.904a288.282 288.282 0 0 0 34.752-20.096l22.592-15.296 116.288 25.024 65.28-113.152-79.744-88.192 1.92-27.136a293.12 293.12 0 0 0 0-40.256l-1.92-27.136 79.808-88.128-65.344-113.152-116.288 24.96-22.592-15.232a287.616 287.616 0 0 0-34.752-20.096l-24.448-11.904L577.344 128zM512 320a192 192 0 1 1 0 384 192 192 0 0 1 0-384m0 64a128 128 0 1 0 0 256 128 128 0 0 0 0-256"></path></svg>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="editeGroup">修改群资料</el-dropdown-item>
                <el-dropdown-item @click="">解散群</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <svg @click="initMessage" class="text-discord-logo fill-current w-8 h-8 p-0.5 hover:bg-discord-hover rounded-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="M736 504a56 56 0 1 1 0-112 56 56 0 0 1 0 112m-224 0a56 56 0 1 1 0-112 56 56 0 0 1 0 112m-224 0a56 56 0 1 1 0-112 56 56 0 0 1 0 112M128 128v640h192v160l224-160h352V128z"></path></svg>
          <el-dropdown>
          <svg class="text-discord-logo fill-current w-8 h-8 p-0.5 hover:bg-discord-hover rounded-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32z"></path></svg>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="checkmembers">管理群成员</el-dropdown-item>
                <el-dropdown-item @click="isFlag.dialogVisibleInviteUser = true">邀请用户加入</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <!--    主体-->
    <div class="sticky top-0 flex h-[874px]">
      <!--        左侧边栏-->
      <div class="w-1/6 min-w-[315px]  bg-discord-200 flex flex-col shadow-sm">
<!--        群组列表-->
        <el-scrollbar max-height="760px">
          <div v-for="group in grouplist" :key="group.groupid" @click="setgroup(group)" class="px-3 gap-3 flex m-2 bg-discord-300 h-[65px] rounded-md items-center hover:bg-discord-hover">
            <img :src=group.groupicon class="w-10 h-10 object-cover rounded-full">
            <span class="text-discord-logo">{{ group.groupname }}</span>
          </div>
        </el-scrollbar>
<!--        用户栏-->
        <div class="p-2 rounded-sm bg-discord-300  ">
          <div class="flex  items-center text-md justify-between">
            <!-- left -->
            <div @click="isFlag.dialogVisibleAcc = true" class="hover:bg-discord-hover px-2 py-1 rounded-md ">
              <div class="flex gap-2 flex-row">
                <img :src=showUser.usericon class="w-10 h-10 rounded-full object-cover">
                <div class="flex flex-col hover:text-gray-300">
                  <span class="hover:text-gray-300 text-discord-logo font-bold">{{showUser.nickname}}</span>
                  <span class="hover:text-gray-300 text-gray-600 text-sm">@{{showUser.username}}</span>
                </div>
              </div>
            </div>
            <!-- right -->
            <el-dropdown>
              <span>
                  <div class="text-discord-logo font-bold px-2">
                     <el-icon><MoreFilled /></el-icon>
                  </div>
                </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
                  <el-dropdown-item @click="isFlag.dialogVisibleGroup = true">创建群聊</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

          </div>
        </div>
      </div>
      <!--        中间-->
      <div class="w-4/6 bg-discord-250 border-discord-300 p-1">
<!--        搜索栏-->
        <div v-if="GLOBAL.GROUPID" class="flex flex-row gap-2 p-2 items-center my-3">
          <el-input
              class="h-[60px] !text-xl"
              v-model="input"
              placeholder="Search for jump to...."
              :prefix-icon="Search"
          />
          <el-button type="primary" class="!h-[60px]" @click="search">搜索</el-button>
        </div>
<!--        消息列表-->
        <el-scrollbar max-height="760px" class="min-w-[700px]">
          <div @click="showmessagelab(message)" v-for="message in messaglist" :key="message.mesg.messageid" class="hover:bg-discord-hover m-2 bg-discord-100 h-[120px] rounded-md flex justify-between p-4">
            <div class="">
              <div class="text-discord-50 max-w-[300px] font-bold truncate">{{message.mesg.title}}</div>
              <div class="text-discord-logo max-w-[400px] max-h-[40px] truncate text-sm">{{message.mesg.messagetext}}</div>
              <div class="flex gap-5">
                <span class="mt-6 text-discord-logo">{{ replaceT(message.mesg.sentdatetime) }}</span>
                <span class="mt-6 text-discord-logo">发布者：{{message.username}} </span>
              </div>
            </div>
            <div class="flex items-center gap-5">
<!--              <img src="../assets/pic/yw.jpg" class=" rounded">-->
              <el-image
                  v-if="message.fileurlpic[0]"
                  :src="message.fileurlpic[0]"
                  :initial-index="0"
                  class="w-[90px] h-[90px] rounded-md"
                  fit="cover"
              />
              <el-dropdown v-if="showUser.tmpRole > 0">
              <div>
                <svg class="text-discord-logo fill-current w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="M176 416a112 112 0 1 0 0 224 112 112 0 0 0 0-224m0 64a48 48 0 1 1 0 96 48 48 0 0 1 0-96m336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224m0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96m336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224m0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96"></path></svg>
              </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="removeMessage(message)">删除通知</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-scrollbar>
      </div>
<!--      消息详情-->
      <el-scrollbar>
      <div v-if="isFlag.messageVisable" class="max-w-[800px] min-h-[874px] overflow-hidden text-discord-50 gap-5 bg-discord-300 p-1">
        <div class="sticky top-0 bg-discord-hover font-bold border-b-2 border-discord-hover flex flex-row gap-2 items-center rounded">
          <div @click="isFlag.messageVisable = false" class="w-fit text-2xl flex rounded-lg p-1 hover:bg-discord-100">←</div>
          <span class="text-md min-w-[400px] overflow-hidden">
            {{Message.title}}
          </span>
        </div>
        <div class="flex flex-col p-2 gap-2">
          <p class="p-2 border-discord-hover border-b-2">
            {{Message.text}}
          </p>
          <el-image v-if="Message.urlpic[0]"
              :src="Message.urlpic[0]"
              :preview-src-list="Message.urlpic"
              :initial-index="0"
              class="w-fit max-w-[400px] rounded-md"
              fit="cover"
          />
          <el-divider></el-divider>
          <div  v-for="file in Message.filelist" :key="file" class="flex bg-discord-hover items-center hover:bg-discord-logo overflow-hidden h-[60px] p-1 m-2 rounded">
            <div class="flex flex-row items-center gap-2">
              <svg class="w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"></path></svg>
              <el-link  type="primary" :href="file.realfilename" target="_blank">{{file.filename}}</el-link>
            </div>
          </div>
        </div>
      </div>
      </el-scrollbar>
      <!--        右侧边栏-->
      <div  class="w-1/6 min-w-[315px] bg-discord-200">

        <el-scrollbar max-height="870px">
            <div v-for="member in groupmember" :key="member.users.userid" class="p-2 m-2 hover:bg-discord-hover border-discord-hover">
              <div class="flex justify-between p-1 ">
                <div class="flex flex-row gap-2 items-center">
                  <img :src=member.users.usericon class="w-10 h-10 object-cover rounded-full">
                  <div class="flex flex-col ">
                  <span class="text-discord-50">
                    {{member.users.nickname}}
                  </span>
                    <span class="text-discord-logo text-sm">
                    @{{member.users.username}}
                  </span>
                  </div>
                </div>
                <div class="text-discord-logo flex text-sm items-center">
                  <span v-if="member.role == 2" class="rounded bg-yellow-500 p-1 text-yellow-50">群主</span>
                  <span v-if="member.role == 1" class="rounded bg-green-500 p-1 text-green-50">管理员</span>
                    <span v-if="member.role == 0" class="rounded bg-blue-400 p-1 text-blue-50">组员</span>
                </div>
              </div>
            </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
  import {reactive,ref} from 'vue';
  import axios, {request} from "axios";
  import {Search} from "@element-plus/icons-vue";
  import {UploadProps,UploadUserFile} from "element-plus";
  import router from "@/router.ts";
  import {set} from "@vueuse/core";
  const input = ref('');
  const user = JSON.parse(localStorage.getItem('user'));
  const grouplist = reactive({});
  const url = 'http://localhost:8080/'
  const Groupfrom = reactive({})
  const messaglist = reactive({});
  const groupmember = reactive({});

  let GroupName =ref('Welcome to use NoticeManager');
  const GLOBAL = reactive({
    GROUPID:''
  })

  const showGroup = reactive({
    groupid:'',
    groupname:'',
    groupicon:'',
    ownerid:''
  })
  const Message = reactive({
    filelist:[{}],
    filename:[],
    url:[],
    filenamepic:[],
    urlpic:[],
    text:'',
    title:'',
    sender:'',
    time:'',
    pic:{}
  });

  const newMessage = reactive({
    groupid:'',
    senderid:user.userid,
    messagetext:'',
    title:''
  })

  const showUser = reactive({
    tmpRole: -1,
    userid: user.userid,
    username: '',
    nickname: '',
    usericon: '',
  })

  const newGroup = reactive({
    groupname: '',
    ownerid: showUser.userid,
    groupicon: '',
  })

  const checkGroupUser = reactive({
    nickname:'',
    username:'',
    checkusername:'',
    userid: '',
    icon:''
  })

  const newGroupUser = reactive({
    groupid: '',
    userid: checkGroupUser.userid,
    role: 0,
  })

  const isFlag = reactive({
    dialogVisibleGroupMembersEdit: false,
    dialogVisibleGroupEdit: false,
    dialogVisibleMessageCreate: false,
    invite: true,
    droprule: 'contextmenu',
    dialogVisibleInviteUser: false,
    groupVisable: false,
    messageVisable: false,
    dialogVisibleAcc: false,
    dialogVisibleGroup: false,
    alert1: false,
  })

  const fileList = ref<UploadUserFile[]>([])

  const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    console.log(file, uploadFiles)
  }

  const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
    console.log(uploadFile)
  }

  const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
    ElMessage.warning(
        `The limit is 3, you selected ${files.length} files this time, add up to ${
            files.length + uploadFiles.length
        } totally`
    )
  }

  const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `Cancel the transfer of ${uploadFile.name} ?`
    ).then(
        () => true,
        () => false
    )
  }
  const replaceT = (value: string): string => {
    // 将 'T' 替换为空格
    return value.replace('T', ' ');
  };
  let editmemberlist = reactive([])
  function checkmembers(){
    axios.get(url + 'users/groupmembers?id='+ GLOBAL.GROUPID)
        .then(response =>{
          for (const key in editmemberlist) {
            delete editmemberlist[key];
          }
          Object.assign(editmemberlist, response.data);
          console.log(editmemberlist)
        })
    isFlag.dialogVisibleGroupMembersEdit = true;
  }

  function setAdmin(userid){
    axios.get(url + 'groupmembers/setadmin?groupid='+GLOBAL.GROUPID+'&userid='+userid)
    console.log(userid)
    location.reload()
  }

  function removeAdmin(userid){
    axios.get(url + 'groupmembers/removeadmin?groupid='+GLOBAL.GROUPID+'&userid='+userid)
    console.log(userid)
    location.reload()
  }

  function removeMember(userid){
    axios.get(url + 'groupmembers/removeuser?groupid='+GLOBAL.GROUPID+'&userid='+userid)
    console.log(userid)
    location.reload()
  }
  function removeMessage(message){
    console.log(message)
    axios.get(url+'messages/delete?id='+message.mesg.messageid)
        .then(response =>{
          if(response.data){
            ElMessage({
              message: '删除成功',
              type: 'success',
              plain: true,
            })
            getmessaglist(GLOBAL.GROUPID);
          }else {
            ElMessage({
              message: '删除失败',
              type: 'error',
              plain: true,
            })
          }
        })

  }
  function editeGroup(){
    axios.get(url+'usergroups/find?id='+GLOBAL.GROUPID)
        .then(response => {

          Object.assign(showGroup, response.data);
          console.log(showGroup)
        })
    isFlag.dialogVisibleGroupEdit = true;
  }
  function exit(){
    router.push("/")
    localStorage.removeItem('user');
  }
  function search(){
    axios.get(url + 'messages/like?groupId='+GLOBAL.GROUPID+'&keyword='+input.value)
        .then(response => {
          for (const key in messaglist) {
            delete messaglist[key];
          }
          Object.assign(messaglist, response.data);
          console.log(messaglist)
          // 在这里处理返回的数据，例如更新页面上的内容等
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
  }

  const setusericon: UploadProps['onSuccess'] = (
      response,
      uploadFile
  ) => {
    showUser.usericon = response
    ElMessage({
      message: '头像上传成功',
      type: 'success',
      plain: true,
    })
    console.log(response)
  }

  const editgroupicon: UploadProps['onSuccess'] = (
      response,
      uploadFile
  ) => {
    showGroup.groupicon = response
    ElMessage({
      message: '群头像上传成功',
      type: 'success',
      plain: true,
    })
    console.log(response)
  }

  const setgroupicon: UploadProps['onSuccess'] = (
      response,
      uploadFile
  ) => {
    newGroup.groupicon = response
    ElMessage({
      message: '群头像上传成功',
      type: 'success',
      plain: true,
    })
    console.log(response)
  }

  function initMessage(){
    axios.post(url+'messagefiles/init')
    isFlag.dialogVisibleMessageCreate = true
  }

  function createMessage(){
    isFlag.dialogVisibleMessageCreate = false
    axios.post(url+'messagefiles/save',newMessage)
        .then(request =>{
          console.log(request.data)
          getmessaglist(GLOBAL.GROUPID);
          ElMessage({
            message: '发布成功',
            type: 'success',
            plain: true,
          })
        })
    fileList.value = ([])
    newMessage.title = ''
    newMessage.messagetext = ''

  }


  function inviteUsername(){
    console.log(newGroupUser)
    axios.post(url+'groupmembers/save', newGroupUser)
        .then(request =>{
          if(request.data){
            ElMessage({
              message: '邀请成功',
              type: 'success',
              plain: true,
            })
          }else {

          }
        })
        .catch(error => {
          console.log("错误"+error)
          console.error('Error fetching data:', error);
          ElMessage({
            message: '邀请失败',
            type: 'error',
            plain: true,
          })
        })
    isFlag.dialogVisibleInviteUser = false;
  }
  function checkUser(){
    axios.get(url+'users/finduser?username=' + checkGroupUser.username)
        .then(response => {
          if(response.data == ''){
            isFlag.invite = true;
            checkGroupUser.username = ''
            checkGroupUser.userid = ''
            checkGroupUser.nickname = ''
            checkGroupUser.icon = ''
            checkGroupUser.checkusername = ''
            newGroupUser.userid = ''
            ElMessage({
              message: '未查询到用户',
              type: 'error',
              plain: true,
            })
          }else {
            checkGroupUser.username = response.data.username
            checkGroupUser.userid = response.data.userid
            checkGroupUser.nickname = response.data.nickname
            checkGroupUser.icon = response.data.usericon
            newGroupUser.userid = response.data.userid
            checkGroupUser.checkusername = checkGroupUser.username
            isFlag.invite = false;
            ElMessage({
              message: '查询成功',
              type: 'success',
              plain: true,
            })
          }

            }
        )
        .catch(error => {

          console.error('Error fetching data:', error);
        });
  }
  function createGroup(){
    axios.post(url+'usergroups/save', newGroup)
        .then(request => {
            console.log(request)
          location.reload()
    })
    isFlag.dialogVisibleGroup = false

  }

  function updateGroup(){
    axios.post(url+'usergroups/save', showGroup)
        .then(request => {
          console.log(request)
        })
    isFlag.dialogVisibleGroupEdit = false;
    location.reload();
  }

  function setgroup(group){
    GLOBAL.GROUPID = group.groupid;
    newGroupUser.groupid = group.groupid;
    newMessage.groupid = group.groupid;
    newMessage.senderid = user.userid
    isFlag.messageVisable = false;
    GroupName.value = group.groupname
    Object.assign(Groupfrom, group);
    getmessaglist(group.groupid);
    getmemberslist(group.groupid);
    isFlag.groupVisable = true;
  }
  //通过userid返回用户加入的组
  function getgrouplist(){
    axios.get(url+'users/find?id=' + user.userid)
        .then(response => {
          console.log(response.data)
         showUser.userid = response.data.userid
         showUser.nickname = response.data.nickname
         showUser.usericon = response.data.usericon
         showUser.username = response.data.username
        }
    )
    axios.post(url + 'groupmembers/find', user.userid)
        .then(response => {
          Object.assign(grouplist, response.data);
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
  }
  getgrouplist()
  //根据用户选择的组返回消息列表
  function saveuser(){
    console.log(showUser)
    axios.post(url + 'users/reg', showUser)
        .then(response => {
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });

    isFlag.dialogVisibleAcc = false

  }
  function getmessaglist(groupid){
    axios.get(url + 'messages/getmsg?id='+ groupid)
        .then(response => {
          for (const key in messaglist) {
            delete messaglist[key];
          }
          Object.assign(messaglist, response.data);
          console.log(messaglist)
          // 在这里处理返回的数据，例如更新页面上的内容等
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
  }
  function getmemberslist(groupid){
    axios.get(url + 'users/groupmembers?id='+ groupid)
        .then(response => {
          for (const x of response.data) {
            if (x.users.userid === showUser.userid){
              showUser.tmpRole = x.role
            }
          }
          console.log(showUser.tmpRole)//获取选择的组的权限级
          for (const key in groupmember) {
            delete groupmember[key];
          }
          Object.assign(groupmember, response.data);
          // 在这里处理返回的数据，例如更新页面上的内容等
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
  }

  function showmessagelab(message){
    Message.urlpic = message.fileurlpic
    Message.filenamepic = message.filenamepic
    Message.filelist = message.otherFileList
    Message.url = message.fileurl
    Message.filename = message.filename
    Message.title = message.mesg.title
    Message.sender = message.mesg.senderid
    Message.text = message.mesg.messagetext
    Message.time = message.mesg.sentdatetime
    isFlag.messageVisable = true
  }
</script>